
import React, { useRef, useEffect } from 'react'
import { _checkuser } from '../../api/user'
import { withRouter } from 'react-router-dom'
import store from '../../redux/store'
import { notification } from 'antd'
import { setUserinfo } from '../../redux/actions/login'
import loginView from './login.module.css'

function Login (props) {
  const form = useRef(null)

  useEffect(() => {
    if (localStorage.getItem('user')) {
      const { useraccount, password, remember } = JSON.parse(localStorage.getItem('user'))

      form.current.elements.useraccount.value = useraccount
      form.current.elements.password.value = password
      form.current.elements.remember.checked = remember
      console.log(form.current.elements);
    }
  }, [])


  const login = () => {

    // 获取登录表单的数据
    const { value: useraccount } = form.current.elements.useraccount
    const { value: password } = form.current.elements.password
    const { checked: remember } = form.current.elements.remember

    if (!check(useraccount) && !check(password)) {
      notification.error({
        message: '请输入',
        description:
          '用户名或密码为空',
      });
      return
    }

    // 记住密码
    if (remember) {
      localStorage.setItem('user', JSON.stringify({ useraccount, password, remember }))
    } else {
      localStorage.removeItem('user')
    }

    let query = {
      useraccount, password, roleState: true
    }
    _checkuser(query).then(res => {
      console.log(res);
      if (res.length > 0) {
        success(res)
        return
      }
      error(res)
    })
  }
  const success = (item) => {
    console.log(item);
    // 将用户信息存储到redux中
    store.dispatch(setUserinfo(item))
    sessionStorage.setItem('token', JSON.stringify('token;yue_zhan;'))
    sessionStorage.setItem('userInfo', JSON.stringify(item))
    props.history.replace('/home')
    notification.success({
      message: '登录成功',
      description:
        '正在加载首页内容',
    });
  }
  const error = () => {
    notification.error({
      message: '登录失败',
      description:
        '用户名或密码输入错误',
    });
  }
  // 校验表单
  const check = (val) => {
    if (val.trim() === '') {
      return false
    }
    return true
  }
  return (
    <div className={loginView.container}>
      <div className={loginView.container_main}>
        <h2 className={loginView.container_title}>后台管理系统</h2>
        <form action='#' className={loginView.form} ref={form}>
          <div className={loginView.formitem}>
            <span className={loginView.lable}>Username:</span>
            <input type="text" name="useraccount" placeholder="用户名" required="" className={loginView.input} autoComplete="off" />
            <div className={loginView.line}></div>
          </div>
          <div className={loginView.formitem}>
            <span className={loginView.lable}>Password:</span>
            <input type="password" name="password" placeholder="密码" required="" className={loginView.input} />
            <div className={loginView.line}></div>
          </div>
          <div className={loginView.checkboxRem}>
            <input type="checkbox" name="remember" className={loginView.remember} /><span><u>Remember me</u></span>
          </div>
          <div className={loginView.submit}>
            <button type="button" onClick={() => { login() }}>登录</button>
          </div>
        </form>
      </div>
    </div>
  )
}
export default withRouter(Login)